import React from 'react';
import { Link } from 'react-router-dom';
import './index.less';

const friendLinkData = {
  shoppingGuide: [
    { title: '购物指南'},
    { title: '购物流程', id: 3 },
    { title: '常见问题', id: 4}
  ],
  serviceSupport: [
    { title: '服务与支持' },
    { title: '保修条款', url: 'https://www.canon.com.cn/supports/policy/warranty.html' },
    { title: '维修网络查询', url: 'https://www.canon.com.cn/supports/repair/index.html' },
    { title: '驱动及固件下载', url: 'https://www.canon.com.cn/supports/download/index.html'}
  ],
  afterSale: [
    { title: '售后服务' },
    { title: '售后政策', id: 8 },
    { title: '退货流程', id: 9 },
    { title: '客服电话', id: 10 },
  ],
  other: [
    { title: '其他' },
    { title: '配送方式', id: 11 },
    { title: '保密协议', url: '/secrecyProtocols', isBlank: true },
    { title: '使用条款', url: 'https://www.canon.com.cn/about/terms/index.html' },
  ]
}

export default class FriendLink extends React.PureComponent {
  renderLinkList(data, key) {
    return (
      <ul key={key}>
        {
          data.map((item, index) =>
            (<li key={index}>
              {
                item.url ?
                  <a href={item.url} target={item.isBlank ? '_self' : '_blank'}>{item.title}</a>
                  :
                  item.id ? <Link to={`/friendLink/${item.id}`}>{item.title}</Link> : item.title
              }
            </li>)
          )
        }
      </ul>
    )
  }

  toDetail = (id) => {
    __self.history.push(`/friendLink/${id}`)
  }

  // componentDidMount(){
  //   ().then((res)=>{
  //     this.setState({list:res.data})
  //   })
  // }

  render() {
    // const { list } = this.state;
    const { shoppingGuide, serviceSupport, afterSale, other } = friendLinkData;
    return (
      <div className="friend-link">
        <div className="friend-link-body">
          {
            [
              this.renderLinkList(shoppingGuide, 'shoppingGuide'),
              this.renderLinkList(serviceSupport, 'serviceSupport'),
              this.renderLinkList(afterSale, 'afterSale'),
              this.renderLinkList(other, 'other'),
            ].map((item,i)=>(
              <div className={`linkbox${i}`} key={i}>{item}</div>
            ))
          }
          {/* <ul>
            {
              list.map((item,i)=>(
                <li className={`linkbox${i}`} key={i} onClick={()=>this.toDetail(item.information_id)}>{item.meta_title}</li>
              ))
            }
          </ul> */}
        </div>
        <div className="friend-link-ft">
          <div className="top">
            <div>本网站登载内容为《互联网广告管理暂行办法》中规定的广告，敬请注意。</div>
          </div>
          <div className="but">
            <div>佳能(中国)有限公司版权所有，未经许可不得转载</div>
            <div>京ICP备05038060号 京公网安备11010102001404号</div>
          </div>
        </div>
      </div>
    );
  }
}